<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="showTable">
    <div class="header">

      <el-row style="width: 100%; height: 95%">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item>
            <el-select v-model="value" clearable placeholder="省份">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="value" clearable placeholder="城市">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="text"
              style="color: black; font-size: 22px"
              @click=""
            >筛选</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-container>
      <el-main>
        <el-table v-loading="loading" border :data="jgbmInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  stripe max-height="700" style="width: 100%">
          <el-table-column fixed :index="indexMethod" type="index" width="100" label="序号" ></el-table-column>

          <el-table-column prop="jgbm" label="监管部门" width="300">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                {{ scope.row.jgbm }}
                <div slot="reference" class="name-wrapper">
                  <el-button  type="text"  style="text-decoration: underline; color: #606266"
                              @click="gotoDetail(scope.row.jgbm)"  >{{ scope.row.jgbm }}
                  </el-button>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="jgbmjb" label="监管部门级别"></el-table-column>
          <el-table-column prop="jgjyjgsl" label="监管检验机构数量"></el-table-column>
          <el-table-column prop="jgsydwsl" label="监管使用单位数量"></el-table-column>
          <el-table-column prop="jgsbsl" label="监管设备数量"></el-table-column>
          <el-table-column prop="jgbmdz" label="监管部门地址" ></el-table-column>
          <el-table-column prop="jgbmlxdh" label="监管部门联系电话" ></el-table-column>
          <el-table-column prop="jgbmlxyx" label="监管部门联系邮箱"></el-table-column>
        </el-table>
      </el-main>
      <el-footer style="display: flex;
    flex-direction: row;
    justify-content: flex-end;">
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>
    </el-container>
    </div>
    <div v-if="showDetail" style="width: 100%;height: 100%;">
      <detail v-bind:jgbm="jgbm" style="height: 100%"></detail>
    </div>
  </el-card>

</template>
<script>
import Breadcrumb from '../../BreadCrumb/BreadCrumb.vue'
import detail from './detail'
import guoluData from '../../../../../assets/jgbmlist.json'

export default {
  name:"list",
  data() {
    return {
      jgbm:'',
      showTable: true,
      showDetail: false,
      total:"",
      currentPage: 1,
      pagesize:10,
      naviItems: [{ text: '电站锅炉' }, { text: '云服监管',to: '/guolu/dataCloudService/jgbm/list'}],
      loading: false,
      tableData: [],
      jgbmName:[],
      jgbmInfo:[],
    }
  },
  components: {
    Breadcrumb,
    detail
  },
  async created() {
    this.showTable = true
    this.showDetail = false
    this.jgbmInfo=guoluData;
    this.total=this.jgbmInfo.length;
    //this.getJsonData()
  },

  methods: {
    getJsonData(){
      this.tableData=guoluData;
      for(let i=0;i<this.tableData.length;i++){
        this.jgbmName.push(this.tableData[i].jgbm)
      }
      let temp=[];
      for (let j in this.jgbmName){
        if((temp.indexOf(this.jgbmName[j])==-1)&&this.jgbmName[j]!=''){
          temp.push(this.jgbmName[j])
        }
      }
      console.log(temp);
      for(let n=0;n<temp.length;n++){
        for (let m=0;m<this.tableData.length;m++){
          if(temp[n]==this.tableData[m].jgbm){
            this.jgbmInfo.push(this.tableData[m])
            break;
          }
        }
      }
      this.total=this.jgbmInfo.length
    },
    indexMethod(index){
      return (this.currentPage-1)*this.pagesize+index+1
    },
    gotoDetail(jgbm) {
      this.jgbm=jgbm;
      this.showTable=false;
      this.showDetail=true
    },
    async pageSizeChange(pageSize) {
      this.pagesize=pageSize

    },
    // 页数改变
    async pageChange(currentPage) {
      this.currentPage=currentPage
      //this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
    //iconfont的使用
  /*@font-face {*/
  /*  font-family: 'iconfont';*/
  /*  src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),*/
  /*  url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),*/
  /*  url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');*/
  /*}*/
  /*.iconfont {*/
  /*  font-family: "iconfont" !important;*/
  /*  font-size: 25px;*/
  /*  color: #0099ff;*/
  /*  font-style: normal;*/
  /*  -webkit-font-smoothing: antialiased;*/
  /*  -moz-osx-font-smoothing: grayscale;*/
  /*}*/
}
</style>
